import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { RouterStore } from 'mobx-react-router';
import { List } from 'antd-mobile';
import ComponentStore from '../../stores/ComponentStore';
import NavBar from '../../component/nav_bar/navBar';

import './HomeList.scss';

const Item = List.Item;

export interface ListTitle {
    title: string;
    name: string;
}

const listTitle: ListTitle[] = [
    {
        title: '工单受理情况统计',
        name: 'Accepted'
    },
    {
        title: '工单办结情况统计',
        name: 'Completed'
    },
    {
        title: '热点诉求统计',
        name: 'HotRequest'
    },
    {
        title: '承办单位热点诉求统计',
        name: 'OrgHotRequest'
    },
];

interface HomeListProps {
    componentStore: ComponentStore;
    routingStore: RouterStore;
}

@inject('componentStore', 'routingStore')
@observer
export default class HomeList extends Component<HomeListProps> {
    render() {
        const { componentStore, routingStore }  = this.props;
        return (
            <div className="subHome-container">
                <NavBar
                    routingStore={routingStore}
                />
                <div className="list-container">
                    <List>
                        {
                            listTitle.map((v: ListTitle, i: number) => (
                                <Item
                                    key={i} 
                                    arrow="horizontal"
                                    onClick={() => { 
                                        routingStore.push('/details');
                                        componentStore.setGraphListIndex(i); 
                                    }}
                                >{v.title}
                                </Item>
                            ))
                        }
                    </List>
                </div>
            </div>
        );
    }
}